import React from 'react'
import { Form, Modal, Button, message, Checkbox} from 'antd'
import PropTypes from 'prop-types'
import './manager.less'
import API from "../../api/person/person";
const FormItem = Form.Item
const CheckboxGroup = Checkbox.Group

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        showViewer: this.props.showViewer,
        options: [],
        checkedList: this.props.checkedArr || [], //defaultCheckedList
        indeterminate: true,
        checkAll: false,
    }
    componentDidMount () {

    }
    componentWillReceiveProps (nextProps) {
        if ('checkedArr' in nextProps) {
            this.setState({checkedList: nextProps.checkedArr})
        }
    }
    onCancel = () => {
        this.props.doViewer()
    }
    onChange = (checkedList) => {
        this.setState({
            checkedList,
            indeterminate: !!checkedList.length && (checkedList.length < this.props.options.length),
            checkAll: checkedList.length === this.state.options.length,
        });
    }
    onCheckAllChange = (e) => {
        this.setState({
            checkedList: e.target.checked ? this.props.options.map(v => v.value) : [],
            indeterminate: false,
            checkAll: e.target.checked,
        });
    }
    getRightsList = (id) => {
        API.getAllRightList({user_id:id}).then(res => {
            console.log(res.data.listData)
            if (res.error === 0) {
                let arr = []
                let checkedArr = []
                for (let i = 0; i < res.data.listData.length; i++) {
                    arr.push({label: res.data.listData[i].pri_name, value: res.data.listData[i].pri_code })
                    if (res.data.listData[i].checked) {
                        checkedArr.push(res.data.listData[i].pri_code)
                    }
                }
                this.setState({options: arr})
            }
        })
    }
    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (err) return
            console.log(this.props.rowInfo)
            values.user_id = this.props.rowInfo.user_id
            console.log(values)
            API.disRights(values).then(res => {
                if (res.error === 0) {
                    message.success('操作成功！')
                    setTimeout(() => {
                        this.props.doSearch()
                        this.props.doViewer()
                    } , 500)
                } else {
                    message.error('操作失败！')
                }
            })
        });
    }

    render () {
        const { getFieldDecorator } = this.props.form
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        }
        return <Modal
            className="dis-viewer store-viewer"
            style={{width: 600}}
            visible={this.props.showViewer}
            title="权限分配"
            onOk={this.handleOk}
            onCancel={this.onCancel}
        >
            <Form
                layout="inline"
                className="supplier-filter"
                onSubmit={this.handleSearch}>
                <div>
                    <Checkbox
                        indeterminate={this.state.indeterminate}
                        onChange={this.onCheckAllChange}
                        checked={this.state.checkAll}
                    >
                        全选
                    </Checkbox>
                </div>
                <FormItem
                    {...formItemLayout}
                    label="权限名称">
                    {getFieldDecorator('privs', {
                        rules: [{
                            required: true, message: '请选择权限！',
                        }],
                        initialValue: this.state.checkedList
                    })(
                        <CheckboxGroup options={this.props.options} />
                    )}
                </FormItem>
                <div className="btns">
                    <Button type="primary" style={{marginRight: 10}} onClick={this.onCancel}>取消</Button>
                    <Button type="primary" htmlType="submit">提交</Button>
                </div>
            </Form>
        </Modal>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    showViewer: PropTypes.any,
    doViewer: PropTypes.func,
    rowInfo: PropTypes.object,
    options: PropTypes.array,
    checkedArr: PropTypes.array,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default IcsComponentsSupplierFilter
